<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Icon 图标</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<!-- <link rel="stylesheet" href="../static/css/element3.css"> -->
	<script src="../static/js/vue.global.prod.js"></script>
	<!-- <script src="../static/js/vue.global.prod3.js"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	<!-- <script src="../static/js/element-plue3.js"></script> -->
	
	<script src="../static/js/icons-vue.js"></script>
	<!-- <script src="../static/js/icons-vue2.js"></script> -->
	<!-- <script src="//unpkg.com/@element-plus/icons-vue"></script> -->
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.el-icon{
	margin-left: 10px;
	margin-right: 10px;
}
.icon-demo{
	display: inline-block;
	background-color: var(--el-color-primary-light-7);
	border: 1px solid gray;
	padding: 4px 30px;
	margin-bottom: 8px;
}
.icon-container{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.icon-cell{
	display: flex;
	flex-direction: column;
	width: 140px;
	height: 90px;
	border: 1px solid lightgray;
}
.icon-icon{
	margin: auto;
}
.icon-text{
	margin: auto;
	color: gray;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<div>
		短标签用法：（必须用横杠写法）（有些大驼峰能用，是因为只有一个大写字母）
		<el-icon><chat-dot-square></chat-dot-square></el-icon>
		<el-icon :size="size" :color="color"><Edit></Edit></el-icon>
		<el-icon><list></list></el-icon>
		<el-icon><folder-opened></folder-opened></el-icon>
		<el-icon><home-filled></home-filled></el-icon>
		<el-icon><eleme-filled></eleme-filled></el-icon>
		<el-icon><folder-opened></folder-opened></el-icon>
		<el-icon><edit-pen></edit-pen></el-icon>
		<el-icon><search><search></el-icon>
		<el-icon><Crop><Crop></el-icon>
		<el-icon><Flag></Flag></el-icon>
		<el-icon><Guide></Guide></el-icon>
		<el-icon><Message></Message></el-icon>
		
		<br>属性引入用法：
		<el-switch v-model="value" :active-icon="Icons.Check" :inactive-icon="Icons.Close"></el-switch>
		
		<br>或者独立使用它，不需要从父类派生属性：
		<Edit style="width: 1em; height: 1em; margin-right: 8px" ></Edit>
		<!-- <Edit /> 不建议这种写法-->
		
		<br>icon属性方式：（必须用大驼峰写法）
		<el-button :icon="Icons.Switch"></el-button>
		<el-button :icon="Icons.Search"></el-button>
		<el-button :icon="Icons.ElementPlus"></el-button>
		<el-button :icon="Icons.Link"></el-button>
		
		
		<br>大驼峰改为横杠链接：
		<el-icon><circle-check /></el-icon> <!-- 这样写虽然可以正常显示，但不推荐，建议补全标签，例如下面的写法： -->
		<el-icon><circle-check></circle-check></el-icon>
		<el-icon class="header-icon"><info-filled></info-filled></el-icon>
		<el-icon><picture-filled></picture-filled></el-icon>
		<el-icon><star-filled></star-filled></el-icon>
		<el-icon><Document></Document></el-icon>
		<el-icon><Postcard></Postcard></el-icon>
		<el-icon><Chat-Line-Square /></el-icon> <!-- 从官网上复制过来的，直接加横杠也可以 -->
		
		
	</div>
	
	<el-divider content-position="left">结合 el-icon 使用</el-divider><!-- =============================================================== -->
	<p>随着额外的类正在加载，你的图标能够在2秒内360度旋转，你也可以覆盖这一点</p>
	<el-icon :size="40"><Edit></Edit></el-icon>
	<el-icon><document-add></document-add></el-icon>
	<el-icon color="#409EFC" class="no-inherit"><Share></Share></el-icon>
	<el-icon><Loading></Loading></el-icon>
	<el-icon class="is-loading"><Loading></Loading></el-icon>
	<el-icon><Delete></Delete></el-icon>
	<el-icon class="is-loading"><Delete></Delete></el-icon>
	<el-button type="primary">
		<el-icon style="vertical-align: middle"><Search></Search></el-icon>
		<span style="vertical-align: middle"> Search </span>
	</el-button>
	
	<el-divider content-position="left">直接使用 SVG 图标</el-divider><!-- =============================================================== -->
	<!-- 由于SVG图标默认不携带任何属性 -->
	<!-- 你需要直接提供它们 -->
	<div style="font-size: 20px">
		<Edit style="width: 1em; height: 1em; margin-right: 8px"></Edit>
	</div>
	<div style="font-size: 20px">
		<Share style="width: 1em; height: 1em; margin-right: 8px"></Share>
	</div>
	<div style="font-size: 80px">
		<Delete style="width: 1em; height: 1em; margin-right: 8px"></Delete>
	</div>
	<div style="font-size: 20px">
		<Search style="width: 1em; height: 1em; margin-right: 8px"></Search>
	</div>
	<!-- 少数关键字冲突，可以直接使用SVG码（加个style，改变样式） -->
	<svg style="width: 20px;height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M715.648 625.152 670.4 579.904l90.496-90.56c75.008-74.944 85.12-186.368 22.656-248.896-62.528-62.464-173.952-52.352-248.96 22.656L444.16 353.6l-45.248-45.248 90.496-90.496c100.032-99.968 251.968-110.08 339.456-22.656 87.488 87.488 77.312 239.424-22.656 339.456l-90.496 90.496zm-90.496 90.496-90.496 90.496C434.624 906.112 282.688 916.224 195.2 828.8c-87.488-87.488-77.312-239.424 22.656-339.456l90.496-90.496 45.248 45.248-90.496 90.56c-75.008 74.944-85.12 186.368-22.656 248.896 62.528 62.464 173.952 52.352 248.96-22.656l90.496-90.496zm0-362.048 45.248 45.248L398.848 670.4 353.6 625.152z"></path></svg>
	
	
	<el-divider content-position="left">所有图标（有少数不能出来，应该是关键字冲突）</el-divider><!-- =============================================================== -->
	<el-affix :offset="120">
		<div class="icon-demo"><p v-text="iconDemo"></p></div>
	</el-affix>
	
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('add-location')"><div class="icon-icon"><el-icon><add-location></add-location></el-icon></div><div class="icon-text">add-location</div></div>
		<div class="icon-cell" @click="clickIcon('aim')"><div class="icon-icon"><el-icon><aim></aim></el-icon></div><div class="icon-text">aim</div></div>
		<div class="icon-cell" @click="clickIcon('alarm-clock')"><div class="icon-icon"><el-icon><alarm-clock></alarm-clock></el-icon></div><div class="icon-text">alarm-clock</div></div>
		<div class="icon-cell" @click="clickIcon('apple')"><div class="icon-icon"><el-icon><apple></apple></el-icon></div><div class="icon-text">apple</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-down')"><div class="icon-icon"><el-icon><arrow-down></arrow-down></el-icon></div><div class="icon-text">arrow-down</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-down-bold')"><div class="icon-icon"><el-icon><arrow-down-bold></arrow-down-bold></el-icon></div><div class="icon-text">arrow-down-bold</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-left')"><div class="icon-icon"><el-icon><arrow-left></arrow-left></el-icon></div><div class="icon-text">arrow-left</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-left-bold')"><div class="icon-icon"><el-icon><arrow-left-bold></arrow-left-bold></el-icon></div><div class="icon-text">arrow-left-bold</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-right')"><div class="icon-icon"><el-icon><arrow-right></arrow-right></el-icon></div><div class="icon-text">arrow-right</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-right-bold')"><div class="icon-icon"><el-icon><arrow-right-bold></arrow-right-bold></el-icon></div><div class="icon-text">arrow-right-bold</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-up')"><div class="icon-icon"><el-icon><arrow-up></arrow-up></el-icon></div><div class="icon-text">arrow-up</div></div>
		<div class="icon-cell" @click="clickIcon('arrow-up-bold')"><div class="icon-icon"><el-icon><arrow-up-bold></arrow-up-bold></el-icon></div><div class="icon-text">arrow-up-bold</div></div>
		<div class="icon-cell" @click="clickIcon('avatar')"><div class="icon-icon"><el-icon><avatar></avatar></el-icon></div><div class="icon-text">avatar</div></div>
		<div class="icon-cell" @click="clickIcon('back')"><div class="icon-icon"><el-icon><back></back></el-icon></div><div class="icon-text">back</div></div>
		<div class="icon-cell" @click="clickIcon('baseball')"><div class="icon-icon"><el-icon><baseball></baseball></el-icon></div><div class="icon-text">baseball</div></div>
		<div class="icon-cell" @click="clickIcon('basketball')"><div class="icon-icon"><el-icon><basketball></basketball></el-icon></div><div class="icon-text">basketball</div></div>
		<div class="icon-cell" @click="clickIcon('bell')"><div class="icon-icon"><el-icon><bell></bell></el-icon></div><div class="icon-text">bell</div></div>
		<div class="icon-cell" @click="clickIcon('bell-filled')"><div class="icon-icon"><el-icon><bell-filled></bell-filled></el-icon></div><div class="icon-text">bell-filled</div></div>
		<div class="icon-cell" @click="clickIcon('bicycle')"><div class="icon-icon"><el-icon><bicycle></bicycle></el-icon></div><div class="icon-text">bicycle</div></div>
		<div class="icon-cell" @click="clickIcon('bottom')"><div class="icon-icon"><el-icon><bottom></bottom></el-icon></div><div class="icon-text">bottom</div></div>
		<div class="icon-cell" @click="clickIcon('bottom-left')"><div class="icon-icon"><el-icon><bottom-left></bottom-left></el-icon></div><div class="icon-text">bottom-left</div></div>
		<div class="icon-cell" @click="clickIcon('bottom-right')"><div class="icon-icon"><el-icon><bottom-right></bottom-right></el-icon></div><div class="icon-text">bottom-right</div></div>
		<div class="icon-cell" @click="clickIcon('bowl')"><div class="icon-icon"><el-icon><bowl></bowl></el-icon></div><div class="icon-text">bowl</div></div>
		<div class="icon-cell" @click="clickIcon('box')"><div class="icon-icon"><el-icon><box></box></el-icon></div><div class="icon-text">box</div></div>
		<div class="icon-cell" @click="clickIcon('briefcase')"><div class="icon-icon"><el-icon><briefcase></briefcase></el-icon></div><div class="icon-text">briefcase</div></div>
		<div class="icon-cell" @click="clickIcon('brush')"><div class="icon-icon"><el-icon><brush></brush></el-icon></div><div class="icon-text">brush</div></div>
		<div class="icon-cell" @click="clickIcon('brush-filled')"><div class="icon-icon"><el-icon><brush-filled></brush-filled></el-icon></div><div class="icon-text">brush-filled</div></div>
		<div class="icon-cell" @click="clickIcon('burger')"><div class="icon-icon"><el-icon><burger></burger></el-icon></div><div class="icon-text">burger</div></div>
		<div class="icon-cell" @click="clickIcon('calendar')"><div class="icon-icon"><el-icon><calendar></calendar></el-icon></div><div class="icon-text">calendar</div></div>
		<div class="icon-cell" @click="clickIcon('camera')"><div class="icon-icon"><el-icon><camera></camera></el-icon></div><div class="icon-text">camera</div></div>
		<div class="icon-cell" @click="clickIcon('camera-filled')"><div class="icon-icon"><el-icon><camera-filled></camera-filled></el-icon></div><div class="icon-text">camera-filled</div></div>
		<div class="icon-cell" @click="clickIcon('caret-bottom')"><div class="icon-icon"><el-icon><caret-bottom></caret-bottom></el-icon></div><div class="icon-text">caret-bottom</div></div>
		<div class="icon-cell" @click="clickIcon('caret-left')"><div class="icon-icon"><el-icon><caret-left></caret-left></el-icon></div><div class="icon-text">caret-left</div></div>
		<div class="icon-cell" @click="clickIcon('caret-right')"><div class="icon-icon"><el-icon><caret-right></caret-right></el-icon></div><div class="icon-text">caret-right</div></div>
		<div class="icon-cell" @click="clickIcon('caret-top')"><div class="icon-icon"><el-icon><caret-top></caret-top></el-icon></div><div class="icon-text">caret-top</div></div>
		<div class="icon-cell" @click="clickIcon('cellphone')"><div class="icon-icon"><el-icon><cellphone></cellphone></el-icon></div><div class="icon-text">cellphone</div></div>
		<div class="icon-cell" @click="clickIcon('chat-dot-round')"><div class="icon-icon"><el-icon><chat-dot-round></chat-dot-round></el-icon></div><div class="icon-text">chat-dot-round</div></div>
		<div class="icon-cell" @click="clickIcon('chat-dot-square')"><div class="icon-icon"><el-icon><chat-dot-square></chat-dot-square></el-icon></div><div class="icon-text">chat-dot-square</div></div>
		<div class="icon-cell" @click="clickIcon('chat-line-round')"><div class="icon-icon"><el-icon><chat-line-round></chat-line-round></el-icon></div><div class="icon-text">chat-line-round</div></div>
		<div class="icon-cell" @click="clickIcon('chat-line-square')"><div class="icon-icon"><el-icon><chat-line-square></chat-line-square></el-icon></div><div class="icon-text">chat-line-square</div></div>
		<div class="icon-cell" @click="clickIcon('chat-round')"><div class="icon-icon"><el-icon><chat-round></chat-round></el-icon></div><div class="icon-text">chat-round</div></div>
		<div class="icon-cell" @click="clickIcon('chat-square')"><div class="icon-icon"><el-icon><chat-square></chat-square></el-icon></div><div class="icon-text">chat-square</div></div>
		<div class="icon-cell" @click="clickIcon('check')"><div class="icon-icon"><el-icon><check></check></el-icon></div><div class="icon-text">check</div></div>
		<div class="icon-cell" @click="clickIcon('checked')"><div class="icon-icon"><el-icon><checked></checked></el-icon></div><div class="icon-text">checked</div></div>
		<div class="icon-cell" @click="clickIcon('cherry')"><div class="icon-icon"><el-icon><cherry></cherry></el-icon></div><div class="icon-text">cherry</div></div>
		<div class="icon-cell" @click="clickIcon('chicken')"><div class="icon-icon"><el-icon><chicken></chicken></el-icon></div><div class="icon-text">chicken</div></div>
		<div class="icon-cell" @click="clickIcon('chrome-filled')"><div class="icon-icon"><el-icon><chrome-filled></chrome-filled></el-icon></div><div class="icon-text">chrome-filled</div></div>
		<div class="icon-cell" @click="clickIcon('circle-check')"><div class="icon-icon"><el-icon><circle-check></circle-check></el-icon></div><div class="icon-text">circle-check</div></div>
		<div class="icon-cell" @click="clickIcon('circle-check-filled')"><div class="icon-icon"><el-icon><circle-check-filled></circle-check-filled></el-icon></div><div class="icon-text">circle-check-filled</div></div>
		<div class="icon-cell" @click="clickIcon('circle-close')"><div class="icon-icon"><el-icon><circle-close></circle-close></el-icon></div><div class="icon-text">circle-close</div></div>
		<div class="icon-cell" @click="clickIcon('circle-close-filled')"><div class="icon-icon"><el-icon><circle-close-filled></circle-close-filled></el-icon></div><div class="icon-text">circle-close-filled</div></div>
		<div class="icon-cell" @click="clickIcon('circle-plus')"><div class="icon-icon"><el-icon><circle-plus></circle-plus></el-icon></div><div class="icon-text">circle-plus</div></div>
		<div class="icon-cell" @click="clickIcon('circle-plus-filled')"><div class="icon-icon"><el-icon><circle-plus-filled></circle-plus-filled></el-icon></div><div class="icon-text">circle-plus-filled</div></div>
		<div class="icon-cell" @click="clickIcon('clock')"><div class="icon-icon"><el-icon><clock></clock></el-icon></div><div class="icon-text">clock</div></div>
		<div class="icon-cell" @click="clickIcon('close')"><div class="icon-icon"><el-icon><close></close></el-icon></div><div class="icon-text">close</div></div>
		<div class="icon-cell" @click="clickIcon('close-bold')"><div class="icon-icon"><el-icon><close-bold></close-bold></el-icon></div><div class="icon-text">close-bold</div></div>
		<div class="icon-cell" @click="clickIcon('cloudy')"><div class="icon-icon"><el-icon><cloudy></cloudy></el-icon></div><div class="icon-text">cloudy</div></div>
		<div class="icon-cell" @click="clickIcon('coffee')"><div class="icon-icon"><el-icon><coffee></coffee></el-icon></div><div class="icon-text">coffee</div></div>
		<div class="icon-cell" @click="clickIcon('coffee-cup')"><div class="icon-icon"><el-icon><coffee-cup></coffee-cup></el-icon></div><div class="icon-text">coffee-cup</div></div>
		<div class="icon-cell" @click="clickIcon('coin')"><div class="icon-icon"><el-icon><coin></coin></el-icon></div><div class="icon-text">coin</div></div>
		<div class="icon-cell" @click="clickIcon('cold-drink')"><div class="icon-icon"><el-icon><cold-drink></cold-drink></el-icon></div><div class="icon-text">cold-drink</div></div>
		<div class="icon-cell" @click="clickIcon('collection')"><div class="icon-icon"><el-icon><collection></collection></el-icon></div><div class="icon-text">collection</div></div>
		<div class="icon-cell" @click="clickIcon('collection-tag')"><div class="icon-icon"><el-icon><collection-tag></collection-tag></el-icon></div><div class="icon-text">collection-tag</div></div>
		<div class="icon-cell" @click="clickIcon('comment')"><div class="icon-icon"><el-icon><comment></comment></el-icon></div><div class="icon-text">comment</div></div>
		<div class="icon-cell" @click="clickIcon('compass')"><div class="icon-icon"><el-icon><compass></compass></el-icon></div><div class="icon-text">compass</div></div>
		<div class="icon-cell" @click="clickIcon('connection')"><div class="icon-icon"><el-icon><connection></connection></el-icon></div><div class="icon-text">connection</div></div>
		<div class="icon-cell" @click="clickIcon('coordinate')"><div class="icon-icon"><el-icon><coordinate></coordinate></el-icon></div><div class="icon-text">coordinate</div></div>
		<div class="icon-cell" @click="clickIcon('copy-document')"><div class="icon-icon"><el-icon><copy-document></copy-document></el-icon></div><div class="icon-text">copy-document</div></div>
		<div class="icon-cell" @click="clickIcon('cpu')"><div class="icon-icon"><el-icon><cpu></cpu></el-icon></div><div class="icon-text">cpu</div></div>
		<div class="icon-cell" @click="clickIcon('credit-card')"><div class="icon-icon"><el-icon><credit-card></credit-card></el-icon></div><div class="icon-text">credit-card</div></div>
		<div class="icon-cell" @click="clickIcon('crop')"><div class="icon-icon"><el-icon><crop></crop></el-icon></div><div class="icon-text">crop</div></div>
		<div class="icon-cell" @click="clickIcon('d-arrow-left')"><div class="icon-icon"><el-icon><d-arrow-left></d-arrow-left></el-icon></div><div class="icon-text">d-arrow-left</div></div>
		<div class="icon-cell" @click="clickIcon('d-arrow-right')"><div class="icon-icon"><el-icon><d-arrow-right></d-arrow-right></el-icon></div><div class="icon-text">d-arrow-right</div></div>
		<div class="icon-cell" @click="clickIcon('d-caret')"><div class="icon-icon"><el-icon><d-caret></d-caret></el-icon></div><div class="icon-text">d-caret</div></div>
		<div class="icon-cell" @click="clickIcon('data-analysis')"><div class="icon-icon"><el-icon><data-analysis></data-analysis></el-icon></div><div class="icon-text">data-analysis</div></div>
		<div class="icon-cell" @click="clickIcon('data-board')"><div class="icon-icon"><el-icon><data-board></data-board></el-icon></div><div class="icon-text">data-board</div></div>
		<div class="icon-cell" @click="clickIcon('data-line')"><div class="icon-icon"><el-icon><data-line></data-line></el-icon></div><div class="icon-text">data-line</div></div>
		<div class="icon-cell" @click="clickIcon('delete')"><div class="icon-icon"><el-icon><delete></delete></el-icon></div><div class="icon-text">delete</div></div>
		<div class="icon-cell" @click="clickIcon('delete-filled')"><div class="icon-icon"><el-icon><delete-filled></delete-filled></el-icon></div><div class="icon-text">delete-filled</div></div>
		<div class="icon-cell" @click="clickIcon('delete-location')"><div class="icon-icon"><el-icon><delete-location></delete-location></el-icon></div><div class="icon-text">delete-location</div></div>
		<div class="icon-cell" @click="clickIcon('dessert')"><div class="icon-icon"><el-icon><dessert></dessert></el-icon></div><div class="icon-text">dessert</div></div>
		<div class="icon-cell" @click="clickIcon('discount')"><div class="icon-icon"><el-icon><discount></discount></el-icon></div><div class="icon-text">discount</div></div>
		<div class="icon-cell" @click="clickIcon('dish')"><div class="icon-icon"><el-icon><dish></dish></el-icon></div><div class="icon-text">dish</div></div>
		<div class="icon-cell" @click="clickIcon('dish-dot')"><div class="icon-icon"><el-icon><dish-dot></dish-dot></el-icon></div><div class="icon-text">dish-dot</div></div>
		<div class="icon-cell" @click="clickIcon('document')"><div class="icon-icon"><el-icon><document></document></el-icon></div><div class="icon-text">document</div></div>
		<div class="icon-cell" @click="clickIcon('document-add')"><div class="icon-icon"><el-icon><document-add></document-add></el-icon></div><div class="icon-text">document-add</div></div>
		<div class="icon-cell" @click="clickIcon('document-checked')"><div class="icon-icon"><el-icon><document-checked></document-checked></el-icon></div><div class="icon-text">document-checked</div></div>
		<div class="icon-cell" @click="clickIcon('document-copy')"><div class="icon-icon"><el-icon><document-copy></document-copy></el-icon></div><div class="icon-text">document-copy</div></div>
		<div class="icon-cell" @click="clickIcon('document-delete')"><div class="icon-icon"><el-icon><document-delete></document-delete></el-icon></div><div class="icon-text">document-delete</div></div>
		<div class="icon-cell" @click="clickIcon('document-remove')"><div class="icon-icon"><el-icon><document-remove></document-remove></el-icon></div><div class="icon-text">document-remove</div></div>
		<div class="icon-cell" @click="clickIcon('download')"><div class="icon-icon"><el-icon><download></download></el-icon></div><div class="icon-text">download</div></div>
		<div class="icon-cell" @click="clickIcon('drizzling')"><div class="icon-icon"><el-icon><drizzling></drizzling></el-icon></div><div class="icon-text">drizzling</div></div>
		<div class="icon-cell" @click="clickIcon('edit')"><div class="icon-icon"><el-icon><edit></edit></el-icon></div><div class="icon-text">edit</div></div>
		<div class="icon-cell" @click="clickIcon('edit-pen')"><div class="icon-icon"><el-icon><edit-pen></edit-pen></el-icon></div><div class="icon-text">edit-pen</div></div>
		<div class="icon-cell" @click="clickIcon('eleme')"><div class="icon-icon"><el-icon><eleme></eleme></el-icon></div><div class="icon-text">eleme</div></div>
		<div class="icon-cell" @click="clickIcon('eleme-filled')"><div class="icon-icon"><el-icon><eleme-filled></eleme-filled></el-icon></div><div class="icon-text">eleme-filled</div></div>
		<div class="icon-cell" @click="clickIcon('element-plus')"><div class="icon-icon"><el-icon><element-plus></element-plus></el-icon></div><div class="icon-text">element-plus</div></div>
		<div class="icon-cell" @click="clickIcon('expand')"><div class="icon-icon"><el-icon><expand></expand></el-icon></div><div class="icon-text">expand</div></div>
		<div class="icon-cell" @click="clickIcon('failed')"><div class="icon-icon"><el-icon><failed></failed></el-icon></div><div class="icon-text">failed</div></div>
		<div class="icon-cell" @click="clickIcon('female')"><div class="icon-icon"><el-icon><female></female></el-icon></div><div class="icon-text">female</div></div>
		<div class="icon-cell" @click="clickIcon('files')"><div class="icon-icon"><el-icon><files></files></el-icon></div><div class="icon-text">files</div></div>
		<div class="icon-cell" @click="clickIcon('film')"><div class="icon-icon"><el-icon><film></film></el-icon></div><div class="icon-text">film</div></div>
		<div class="icon-cell" @click="clickIcon('filter')"><div class="icon-icon"><el-icon><filter></filter></el-icon></div><div class="icon-text">filter</div></div>
		<div class="icon-cell" @click="clickIcon('finished')"><div class="icon-icon"><el-icon><finished></finished></el-icon></div><div class="icon-text">finished</div></div>
		<div class="icon-cell" @click="clickIcon('first-aid-kit')"><div class="icon-icon"><el-icon><first-aid-kit></first-aid-kit></el-icon></div><div class="icon-text">first-aid-kit</div></div>
		<div class="icon-cell" @click="clickIcon('flag')"><div class="icon-icon"><el-icon><flag></flag></el-icon></div><div class="icon-text">flag</div></div>
		<div class="icon-cell" @click="clickIcon('fold')"><div class="icon-icon"><el-icon><fold></fold></el-icon></div><div class="icon-text">fold</div></div>
		<div class="icon-cell" @click="clickIcon('folder')"><div class="icon-icon"><el-icon><folder></folder></el-icon></div><div class="icon-text">folder</div></div>
		<div class="icon-cell" @click="clickIcon('folder-add')"><div class="icon-icon"><el-icon><folder-add></folder-add></el-icon></div><div class="icon-text">folder-add</div></div>
		<div class="icon-cell" @click="clickIcon('folder-checked')"><div class="icon-icon"><el-icon><folder-checked></folder-checked></el-icon></div><div class="icon-text">folder-checked</div></div>
		<div class="icon-cell" @click="clickIcon('folder-delete')"><div class="icon-icon"><el-icon><folder-delete></folder-delete></el-icon></div><div class="icon-text">folder-delete</div></div>
		<div class="icon-cell" @click="clickIcon('folder-opened')"><div class="icon-icon"><el-icon><folder-opened></folder-opened></el-icon></div><div class="icon-text">folder-opened</div></div>
		<div class="icon-cell" @click="clickIcon('folder-remove')"><div class="icon-icon"><el-icon><folder-remove></folder-remove></el-icon></div><div class="icon-text">folder-remove</div></div>
		<div class="icon-cell" @click="clickIcon('food')"><div class="icon-icon"><el-icon><food></food></el-icon></div><div class="icon-text">food</div></div>
		<div class="icon-cell" @click="clickIcon('football')"><div class="icon-icon"><el-icon><football></football></el-icon></div><div class="icon-text">football</div></div>
		<div class="icon-cell" @click="clickIcon('fork-spoon')"><div class="icon-icon"><el-icon><fork-spoon></fork-spoon></el-icon></div><div class="icon-text">fork-spoon</div></div>
		<div class="icon-cell" @click="clickIcon('fries')"><div class="icon-icon"><el-icon><fries></fries></el-icon></div><div class="icon-text">fries</div></div>
		<div class="icon-cell" @click="clickIcon('full-screen')"><div class="icon-icon"><el-icon><full-screen></full-screen></el-icon></div><div class="icon-text">full-screen</div></div>
		<div class="icon-cell" @click="clickIcon('goblet')"><div class="icon-icon"><el-icon><goblet></goblet></el-icon></div><div class="icon-text">goblet</div></div>
		<div class="icon-cell" @click="clickIcon('goblet-full')"><div class="icon-icon"><el-icon><goblet-full></goblet-full></el-icon></div><div class="icon-text">goblet-full</div></div>
		<div class="icon-cell" @click="clickIcon('goblet-square')"><div class="icon-icon"><el-icon><goblet-square></goblet-square></el-icon></div><div class="icon-text">goblet-square</div></div>
		<div class="icon-cell" @click="clickIcon('goblet-square-full')"><div class="icon-icon"><el-icon><goblet-square-full></goblet-square-full></el-icon></div><div class="icon-text">goblet-square-full</div></div>
		<div class="icon-cell" @click="clickIcon('gold-medal')"><div class="icon-icon"><el-icon><gold-medal></gold-medal></el-icon></div><div class="icon-text">gold-medal</div></div>
		<div class="icon-cell" @click="clickIcon('goods')"><div class="icon-icon"><el-icon><goods></goods></el-icon></div><div class="icon-text">goods</div></div>
		<div class="icon-cell" @click="clickIcon('goods-filled')"><div class="icon-icon"><el-icon><goods-filled></goods-filled></el-icon></div><div class="icon-text">goods-filled</div></div>
		<div class="icon-cell" @click="clickIcon('grape')"><div class="icon-icon"><el-icon><grape></grape></el-icon></div><div class="icon-text">grape</div></div>
		<div class="icon-cell" @click="clickIcon('grid')"><div class="icon-icon"><el-icon><grid></grid></el-icon></div><div class="icon-text">grid</div></div>
		<div class="icon-cell" @click="clickIcon('guide')"><div class="icon-icon"><el-icon><guide></guide></el-icon></div><div class="icon-text">guide</div></div>
		<div class="icon-cell" @click="clickIcon('handbag')"><div class="icon-icon"><el-icon><handbag></handbag></el-icon></div><div class="icon-text">handbag</div></div>
		<div class="icon-cell" @click="clickIcon('headset')"><div class="icon-icon"><el-icon><headset></headset></el-icon></div><div class="icon-text">headset</div></div>
		<div class="icon-cell" @click="clickIcon('help')"><div class="icon-icon"><el-icon><help></help></el-icon></div><div class="icon-text">help</div></div>
		<div class="icon-cell" @click="clickIcon('help-filled')"><div class="icon-icon"><el-icon><help-filled></help-filled></el-icon></div><div class="icon-text">help-filled</div></div>
		<div class="icon-cell" @click="clickIcon('hide')"><div class="icon-icon"><el-icon><hide></hide></el-icon></div><div class="icon-text">hide</div></div>
		<div class="icon-cell" @click="clickIcon('histogram')"><div class="icon-icon"><el-icon><histogram></histogram></el-icon></div><div class="icon-text">histogram</div></div>
		<div class="icon-cell" @click="clickIcon('home-filled')"><div class="icon-icon"><el-icon><home-filled></home-filled></el-icon></div><div class="icon-text">home-filled</div></div>
		<div class="icon-cell" @click="clickIcon('hot-water')"><div class="icon-icon"><el-icon><hot-water></hot-water></el-icon></div><div class="icon-text">hot-water</div></div>
		<div class="icon-cell" @click="clickIcon('house')"><div class="icon-icon"><el-icon><house></house></el-icon></div><div class="icon-text">house</div></div>
		<div class="icon-cell" @click="clickIcon('ice-cream')"><div class="icon-icon"><el-icon><ice-cream></ice-cream></el-icon></div><div class="icon-text">ice-cream</div></div>
		<div class="icon-cell" @click="clickIcon('ice-cream-round')"><div class="icon-icon"><el-icon><ice-cream-round></ice-cream-round></el-icon></div><div class="icon-text">ice-cream-round</div></div>
		<div class="icon-cell" @click="clickIcon('ice-cream-square')"><div class="icon-icon"><el-icon><ice-cream-square></ice-cream-square></el-icon></div><div class="icon-text">ice-cream-square</div></div>
		<div class="icon-cell" @click="clickIcon('ice-drink')"><div class="icon-icon"><el-icon><ice-drink></ice-drink></el-icon></div><div class="icon-text">ice-drink</div></div>
		<div class="icon-cell" @click="clickIcon('ice-tea')"><div class="icon-icon"><el-icon><ice-tea></ice-tea></el-icon></div><div class="icon-text">ice-tea</div></div>
		<div class="icon-cell" @click="clickIcon('info-filled')"><div class="icon-icon"><el-icon><info-filled></info-filled></el-icon></div><div class="icon-text">info-filled</div></div>
		<div class="icon-cell" @click="clickIcon('iphone')"><div class="icon-icon"><el-icon><iphone></iphone></el-icon></div><div class="icon-text">iphone</div></div>
		<div class="icon-cell" @click="clickIcon('key')"><div class="icon-icon"><el-icon><key></key></el-icon></div><div class="icon-text">key</div></div>
		<div class="icon-cell" @click="clickIcon('knife-fork')"><div class="icon-icon"><el-icon><knife-fork></knife-fork></el-icon></div><div class="icon-text">knife-fork</div></div>
		<div class="icon-cell" @click="clickIcon('lightning')"><div class="icon-icon"><el-icon><lightning></lightning></el-icon></div><div class="icon-text">lightning</div></div>
		<div class="icon-cell" @click="clickIcon('link')"><div class="icon-icon"><el-icon><link></link></el-icon></div><div class="icon-text">link</div></div>
		<div class="icon-cell" @click="clickIcon('list')"><div class="icon-icon"><el-icon><list></list></el-icon></div><div class="icon-text">list</div></div>
		<div class="icon-cell" @click="clickIcon('loading')"><div class="icon-icon"><el-icon><loading></loading></el-icon></div><div class="icon-text">loading</div></div>
		<div class="icon-cell" @click="clickIcon('location')"><div class="icon-icon"><el-icon><location></location></el-icon></div><div class="icon-text">location</div></div>
		<div class="icon-cell" @click="clickIcon('location-filled')"><div class="icon-icon"><el-icon><location-filled></location-filled></el-icon></div><div class="icon-text">location-filled</div></div>
		<div class="icon-cell" @click="clickIcon('location-information')"><div class="icon-icon"><el-icon><location-information></location-information></el-icon></div><div class="icon-text">location-information</div></div>
		<div class="icon-cell" @click="clickIcon('lock')"><div class="icon-icon"><el-icon><lock></lock></el-icon></div><div class="icon-text">lock</div></div>
		<div class="icon-cell" @click="clickIcon('lollipop')"><div class="icon-icon"><el-icon><lollipop></lollipop></el-icon></div><div class="icon-text">lollipop</div></div>
		<div class="icon-cell" @click="clickIcon('magic-stick')"><div class="icon-icon"><el-icon><magic-stick></magic-stick></el-icon></div><div class="icon-text">magic-stick</div></div>
		<div class="icon-cell" @click="clickIcon('magnet')"><div class="icon-icon"><el-icon><magnet></magnet></el-icon></div><div class="icon-text">magnet</div></div>
		<div class="icon-cell" @click="clickIcon('male')"><div class="icon-icon"><el-icon><male></male></el-icon></div><div class="icon-text">male</div></div>
		<div class="icon-cell" @click="clickIcon('management')"><div class="icon-icon"><el-icon><management></management></el-icon></div><div class="icon-text">management</div></div>
		<div class="icon-cell" @click="clickIcon('map-location')"><div class="icon-icon"><el-icon><map-location></map-location></el-icon></div><div class="icon-text">map-location</div></div>
		<div class="icon-cell" @click="clickIcon('medal')"><div class="icon-icon"><el-icon><medal></medal></el-icon></div><div class="icon-text">medal</div></div>
		<div class="icon-cell" @click="clickIcon('memo')"><div class="icon-icon"><el-icon><memo></memo></el-icon></div><div class="icon-text">memo</div></div>
		<div class="icon-cell" @click="clickIcon('menu')"><div class="icon-icon"><el-icon><menu></menu></el-icon></div><div class="icon-text">menu</div></div>
		<div class="icon-cell" @click="clickIcon('message')"><div class="icon-icon"><el-icon><message></message></el-icon></div><div class="icon-text">message</div></div>
		<div class="icon-cell" @click="clickIcon('message-box')"><div class="icon-icon"><el-icon><message-box></message-box></el-icon></div><div class="icon-text">message-box</div></div>
		<div class="icon-cell" @click="clickIcon('mic')"><div class="icon-icon"><el-icon><mic></mic></el-icon></div><div class="icon-text">mic</div></div>
		<div class="icon-cell" @click="clickIcon('microphone')"><div class="icon-icon"><el-icon><microphone></microphone></el-icon></div><div class="icon-text">microphone</div></div>
		<div class="icon-cell" @click="clickIcon('milk-tea')"><div class="icon-icon"><el-icon><milk-tea></milk-tea></el-icon></div><div class="icon-text">milk-tea</div></div>
		<div class="icon-cell" @click="clickIcon('minus')"><div class="icon-icon"><el-icon><minus></minus></el-icon></div><div class="icon-text">minus</div></div>
		<div class="icon-cell" @click="clickIcon('money')"><div class="icon-icon"><el-icon><money></money></el-icon></div><div class="icon-text">money</div></div>
		<div class="icon-cell" @click="clickIcon('monitor')"><div class="icon-icon"><el-icon><monitor></monitor></el-icon></div><div class="icon-text">monitor</div></div>
		<div class="icon-cell" @click="clickIcon('moon')"><div class="icon-icon"><el-icon><moon></moon></el-icon></div><div class="icon-text">moon</div></div>
		<div class="icon-cell" @click="clickIcon('moon-night')"><div class="icon-icon"><el-icon><moon-night></moon-night></el-icon></div><div class="icon-text">moon-night</div></div>
		<div class="icon-cell" @click="clickIcon('more')"><div class="icon-icon"><el-icon><more></more></el-icon></div><div class="icon-text">more</div></div>
		<div class="icon-cell" @click="clickIcon('more-filled')"><div class="icon-icon"><el-icon><more-filled></more-filled></el-icon></div><div class="icon-text">more-filled</div></div>
		<div class="icon-cell" @click="clickIcon('mostly-cloudy')"><div class="icon-icon"><el-icon><mostly-cloudy></mostly-cloudy></el-icon></div><div class="icon-text">mostly-cloudy</div></div>
		<div class="icon-cell" @click="clickIcon('mouse')"><div class="icon-icon"><el-icon><mouse></mouse></el-icon></div><div class="icon-text">mouse</div></div>
		<div class="icon-cell" @click="clickIcon('mug')"><div class="icon-icon"><el-icon><mug></mug></el-icon></div><div class="icon-text">mug</div></div>
		<div class="icon-cell" @click="clickIcon('mute')"><div class="icon-icon"><el-icon><mute></mute></el-icon></div><div class="icon-text">mute</div></div>
		<div class="icon-cell" @click="clickIcon('mute-notification')"><div class="icon-icon"><el-icon><mute-notification></mute-notification></el-icon></div><div class="icon-text">mute-notification</div></div>
		<div class="icon-cell" @click="clickIcon('no-smoking')"><div class="icon-icon"><el-icon><no-smoking></no-smoking></el-icon></div><div class="icon-text">no-smoking</div></div>
		<div class="icon-cell" @click="clickIcon('notebook')"><div class="icon-icon"><el-icon><notebook></notebook></el-icon></div><div class="icon-text">notebook</div></div>
		<div class="icon-cell" @click="clickIcon('notification')"><div class="icon-icon"><el-icon><notification></notification></el-icon></div><div class="icon-text">notification</div></div>
		<div class="icon-cell" @click="clickIcon('odometer')"><div class="icon-icon"><el-icon><odometer></odometer></el-icon></div><div class="icon-text">odometer</div></div>
		<div class="icon-cell" @click="clickIcon('office-building')"><div class="icon-icon"><el-icon><office-building></office-building></el-icon></div><div class="icon-text">office-building</div></div>
		<div class="icon-cell" @click="clickIcon('open')"><div class="icon-icon"><el-icon><open></open></el-icon></div><div class="icon-text">open</div></div>
		<div class="icon-cell" @click="clickIcon('operation')"><div class="icon-icon"><el-icon><operation></operation></el-icon></div><div class="icon-text">operation</div></div>
		<div class="icon-cell" @click="clickIcon('opportunity')"><div class="icon-icon"><el-icon><opportunity></opportunity></el-icon></div><div class="icon-text">opportunity</div></div>
		<div class="icon-cell" @click="clickIcon('orange')"><div class="icon-icon"><el-icon><orange></orange></el-icon></div><div class="icon-text">orange</div></div>
		<div class="icon-cell" @click="clickIcon('paperclip')"><div class="icon-icon"><el-icon><paperclip></paperclip></el-icon></div><div class="icon-text">paperclip</div></div>
		<div class="icon-cell" @click="clickIcon('partly-cloudy')"><div class="icon-icon"><el-icon><partly-cloudy></partly-cloudy></el-icon></div><div class="icon-text">partly-cloudy</div></div>
		<div class="icon-cell" @click="clickIcon('pear')"><div class="icon-icon"><el-icon><pear></pear></el-icon></div><div class="icon-text">pear</div></div>
		<div class="icon-cell" @click="clickIcon('phone')"><div class="icon-icon"><el-icon><phone></phone></el-icon></div><div class="icon-text">phone</div></div>
		<div class="icon-cell" @click="clickIcon('phone-filled')"><div class="icon-icon"><el-icon><phone-filled></phone-filled></el-icon></div><div class="icon-text">phone-filled</div></div>
		<div class="icon-cell" @click="clickIcon('picture')"><div class="icon-icon"><el-icon><picture></picture></el-icon></div><div class="icon-text">picture</div></div>
		<div class="icon-cell" @click="clickIcon('picture-filled')"><div class="icon-icon"><el-icon><picture-filled></picture-filled></el-icon></div><div class="icon-text">picture-filled</div></div>
		<div class="icon-cell" @click="clickIcon('picture-rounded')"><div class="icon-icon"><el-icon><picture-rounded></picture-rounded></el-icon></div><div class="icon-text">picture-rounded</div></div>
		<div class="icon-cell" @click="clickIcon('pie-chart')"><div class="icon-icon"><el-icon><pie-chart></pie-chart></el-icon></div><div class="icon-text">pie-chart</div></div>
		<div class="icon-cell" @click="clickIcon('place')"><div class="icon-icon"><el-icon><place></place></el-icon></div><div class="icon-text">place</div></div>
		<div class="icon-cell" @click="clickIcon('platform')"><div class="icon-icon"><el-icon><platform></platform></el-icon></div><div class="icon-text">platform</div></div>
		<div class="icon-cell" @click="clickIcon('plus')"><div class="icon-icon"><el-icon><plus></plus></el-icon></div><div class="icon-text">plus</div></div>
		<div class="icon-cell" @click="clickIcon('pointer')"><div class="icon-icon"><el-icon><pointer></pointer></el-icon></div><div class="icon-text">pointer</div></div>
		<div class="icon-cell" @click="clickIcon('position')"><div class="icon-icon"><el-icon><position></position></el-icon></div><div class="icon-text">position</div></div>
		<div class="icon-cell" @click="clickIcon('postcard')"><div class="icon-icon"><el-icon><postcard></postcard></el-icon></div><div class="icon-text">postcard</div></div>
		<div class="icon-cell" @click="clickIcon('pouring')"><div class="icon-icon"><el-icon><pouring></pouring></el-icon></div><div class="icon-text">pouring</div></div>
		<div class="icon-cell" @click="clickIcon('present')"><div class="icon-icon"><el-icon><present></present></el-icon></div><div class="icon-text">present</div></div>
		<div class="icon-cell" @click="clickIcon('price-tag')"><div class="icon-icon"><el-icon><price-tag></price-tag></el-icon></div><div class="icon-text">price-tag</div></div>
		<div class="icon-cell" @click="clickIcon('printer')"><div class="icon-icon"><el-icon><printer></printer></el-icon></div><div class="icon-text">printer</div></div>
		<div class="icon-cell" @click="clickIcon('promotion')"><div class="icon-icon"><el-icon><promotion></promotion></el-icon></div><div class="icon-text">promotion</div></div>
		<div class="icon-cell" @click="clickIcon('quartz-watch')"><div class="icon-icon"><el-icon><quartz-watch></quartz-watch></el-icon></div><div class="icon-text">quartz-watch</div></div>
		<div class="icon-cell" @click="clickIcon('question-filled')"><div class="icon-icon"><el-icon><question-filled></question-filled></el-icon></div><div class="icon-text">question-filled</div></div>
		<div class="icon-cell" @click="clickIcon('rank')"><div class="icon-icon"><el-icon><rank></rank></el-icon></div><div class="icon-text">rank</div></div>
		<div class="icon-cell" @click="clickIcon('reading')"><div class="icon-icon"><el-icon><reading></reading></el-icon></div><div class="icon-text">reading</div></div>
		<div class="icon-cell" @click="clickIcon('reading-lamp')"><div class="icon-icon"><el-icon><reading-lamp></reading-lamp></el-icon></div><div class="icon-text">reading-lamp</div></div>
		<div class="icon-cell" @click="clickIcon('refresh')"><div class="icon-icon"><el-icon><refresh></refresh></el-icon></div><div class="icon-text">refresh</div></div>
		<div class="icon-cell" @click="clickIcon('refresh-left')"><div class="icon-icon"><el-icon><refresh-left></refresh-left></el-icon></div><div class="icon-text">refresh-left</div></div>
		<div class="icon-cell" @click="clickIcon('refresh-right')"><div class="icon-icon"><el-icon><refresh-right></refresh-right></el-icon></div><div class="icon-text">refresh-right</div></div>
		<div class="icon-cell" @click="clickIcon('refrigerator')"><div class="icon-icon"><el-icon><refrigerator></refrigerator></el-icon></div><div class="icon-text">refrigerator</div></div>
		<div class="icon-cell" @click="clickIcon('remove')"><div class="icon-icon"><el-icon><remove></remove></el-icon></div><div class="icon-text">remove</div></div>
		<div class="icon-cell" @click="clickIcon('remove-filled')"><div class="icon-icon"><el-icon><remove-filled></remove-filled></el-icon></div><div class="icon-text">remove-filled</div></div>
		<div class="icon-cell" @click="clickIcon('right')"><div class="icon-icon"><el-icon><right></right></el-icon></div><div class="icon-text">right</div></div>
		<div class="icon-cell" @click="clickIcon('scale-to-original')"><div class="icon-icon"><el-icon><scale-to-original></scale-to-original></el-icon></div><div class="icon-text">scale-to-original</div></div>
		<div class="icon-cell" @click="clickIcon('school')"><div class="icon-icon"><el-icon><school></school></el-icon></div><div class="icon-text">school</div></div>
		<div class="icon-cell" @click="clickIcon('scissor')"><div class="icon-icon"><el-icon><scissor></scissor></el-icon></div><div class="icon-text">scissor</div></div>
		<div class="icon-cell" @click="clickIcon('search')"><div class="icon-icon"><el-icon><search></search></el-icon></div><div class="icon-text">search</div></div>
		<div class="icon-cell" @click="clickIcon('select')"><div class="icon-icon"><el-icon><select></select></el-icon></div><div class="icon-text">select</div></div>
		<div class="icon-cell" @click="clickIcon('sell')"><div class="icon-icon"><el-icon><sell></sell></el-icon></div><div class="icon-text">sell</div></div>
		<div class="icon-cell" @click="clickIcon('semi-select')"><div class="icon-icon"><el-icon><semi-select></semi-select></el-icon></div><div class="icon-text">semi-select</div></div>
		<div class="icon-cell" @click="clickIcon('service')"><div class="icon-icon"><el-icon><service></service></el-icon></div><div class="icon-text">service</div></div>
		<div class="icon-cell" @click="clickIcon('set-up')"><div class="icon-icon"><el-icon><set-up></set-up></el-icon></div><div class="icon-text">set-up</div></div>
		<div class="icon-cell" @click="clickIcon('setting')"><div class="icon-icon"><el-icon><setting></setting></el-icon></div><div class="icon-text">setting</div></div>
		<div class="icon-cell" @click="clickIcon('share')"><div class="icon-icon"><el-icon><share></share></el-icon></div><div class="icon-text">share</div></div>
		<div class="icon-cell" @click="clickIcon('ship')"><div class="icon-icon"><el-icon><ship></ship></el-icon></div><div class="icon-text">ship</div></div>
		<div class="icon-cell" @click="clickIcon('shop')"><div class="icon-icon"><el-icon><shop></shop></el-icon></div><div class="icon-text">shop</div></div>
		<div class="icon-cell" @click="clickIcon('shopping-bag')"><div class="icon-icon"><el-icon><shopping-bag></shopping-bag></el-icon></div><div class="icon-text">shopping-bag</div></div>
		<div class="icon-cell" @click="clickIcon('shopping-cart')"><div class="icon-icon"><el-icon><shopping-cart></shopping-cart></el-icon></div><div class="icon-text">shopping-cart</div></div>
		<div class="icon-cell" @click="clickIcon('shopping-cart-full')"><div class="icon-icon"><el-icon><shopping-cart-full></shopping-cart-full></el-icon></div><div class="icon-text">shopping-cart-full</div></div>
		<div class="icon-cell" @click="clickIcon('shopping-trolley')"><div class="icon-icon"><el-icon><shopping-trolley></shopping-trolley></el-icon></div><div class="icon-text">shopping-trolley</div></div>
		<div class="icon-cell" @click="clickIcon('smoking')"><div class="icon-icon"><el-icon><smoking></smoking></el-icon></div><div class="icon-text">smoking</div></div>
		<div class="icon-cell" @click="clickIcon('soccer')"><div class="icon-icon"><el-icon><soccer></soccer></el-icon></div><div class="icon-text">soccer</div></div>
		<div class="icon-cell" @click="clickIcon('sold-out')"><div class="icon-icon"><el-icon><sold-out></sold-out></el-icon></div><div class="icon-text">sold-out</div></div>
		<div class="icon-cell" @click="clickIcon('sort')"><div class="icon-icon"><el-icon><sort></sort></el-icon></div><div class="icon-text">sort</div></div>
		<div class="icon-cell" @click="clickIcon('sort-down')"><div class="icon-icon"><el-icon><sort-down></sort-down></el-icon></div><div class="icon-text">sort-down</div></div>
		<div class="icon-cell" @click="clickIcon('sort-up')"><div class="icon-icon"><el-icon><sort-up></sort-up></el-icon></div><div class="icon-text">sort-up</div></div>
		<div class="icon-cell" @click="clickIcon('stamp')"><div class="icon-icon"><el-icon><stamp></stamp></el-icon></div><div class="icon-text">stamp</div></div>
		<div class="icon-cell" @click="clickIcon('star')"><div class="icon-icon"><el-icon><star></star></el-icon></div><div class="icon-text">star</div></div>
		<div class="icon-cell" @click="clickIcon('star-filled')"><div class="icon-icon"><el-icon><star-filled></star-filled></el-icon></div><div class="icon-text">star-filled</div></div>
		<div class="icon-cell" @click="clickIcon('stopwatch')"><div class="icon-icon"><el-icon><stopwatch></stopwatch></el-icon></div><div class="icon-text">stopwatch</div></div>
		<div class="icon-cell" @click="clickIcon('success-filled')"><div class="icon-icon"><el-icon><success-filled></success-filled></el-icon></div><div class="icon-text">success-filled</div></div>
		<div class="icon-cell" @click="clickIcon('sugar')"><div class="icon-icon"><el-icon><sugar></sugar></el-icon></div><div class="icon-text">sugar</div></div>
		<div class="icon-cell" @click="clickIcon('suitcase')"><div class="icon-icon"><el-icon><suitcase></suitcase></el-icon></div><div class="icon-text">suitcase</div></div>
		<div class="icon-cell" @click="clickIcon('suitcase-line')"><div class="icon-icon"><el-icon><suitcase-line></suitcase-line></el-icon></div><div class="icon-text">suitcase-line</div></div>
		<div class="icon-cell" @click="clickIcon('sunny')"><div class="icon-icon"><el-icon><sunny></sunny></el-icon></div><div class="icon-text">sunny</div></div>
		<div class="icon-cell" @click="clickIcon('sunrise')"><div class="icon-icon"><el-icon><sunrise></sunrise></el-icon></div><div class="icon-text">sunrise</div></div>
		<div class="icon-cell" @click="clickIcon('sunset')"><div class="icon-icon"><el-icon><sunset></sunset></el-icon></div><div class="icon-text">sunset</div></div>
		<div class="icon-cell" @click="clickIcon('switch')"><div class="icon-icon"><el-icon><switch></switch></el-icon></div><div class="icon-text">switch</div></div>
		<div class="icon-cell" @click="clickIcon('switch-button')"><div class="icon-icon"><el-icon><switch-button></switch-button></el-icon></div><div class="icon-text">switch-button</div></div>
		<div class="icon-cell" @click="clickIcon('switch-filled')"><div class="icon-icon"><el-icon><switch-filled></switch-filled></el-icon></div><div class="icon-text">switch-filled</div></div>
		<div class="icon-cell" @click="clickIcon('takeaway-box')"><div class="icon-icon"><el-icon><takeaway-box></takeaway-box></el-icon></div><div class="icon-text">takeaway-box</div></div>
		<div class="icon-cell" @click="clickIcon('ticket')"><div class="icon-icon"><el-icon><ticket></ticket></el-icon></div><div class="icon-text">ticket</div></div>
		<div class="icon-cell" @click="clickIcon('tickets')"><div class="icon-icon"><el-icon><tickets></tickets></el-icon></div><div class="icon-text">tickets</div></div>
		<div class="icon-cell" @click="clickIcon('timer')"><div class="icon-icon"><el-icon><timer></timer></el-icon></div><div class="icon-text">timer</div></div>
		<div class="icon-cell" @click="clickIcon('toilet-paper')"><div class="icon-icon"><el-icon><toilet-paper></toilet-paper></el-icon></div><div class="icon-text">toilet-paper</div></div>
		<div class="icon-cell" @click="clickIcon('tools')"><div class="icon-icon"><el-icon><tools></tools></el-icon></div><div class="icon-text">tools</div></div>
		<div class="icon-cell" @click="clickIcon('top')"><div class="icon-icon"><el-icon><top></top></el-icon></div><div class="icon-text">top</div></div>
		<div class="icon-cell" @click="clickIcon('top-left')"><div class="icon-icon"><el-icon><top-left></top-left></el-icon></div><div class="icon-text">top-left</div></div>
		<div class="icon-cell" @click="clickIcon('top-right')"><div class="icon-icon"><el-icon><top-right></top-right></el-icon></div><div class="icon-text">top-right</div></div>
		<div class="icon-cell" @click="clickIcon('trend-charts')"><div class="icon-icon"><el-icon><trend-charts></trend-charts></el-icon></div><div class="icon-text">trend-charts</div></div>
		<div class="icon-cell" @click="clickIcon('trophy')"><div class="icon-icon"><el-icon><trophy></trophy></el-icon></div><div class="icon-text">trophy</div></div>
		<div class="icon-cell" @click="clickIcon('trophy-base')"><div class="icon-icon"><el-icon><trophy-base></trophy-base></el-icon></div><div class="icon-text">trophy-base</div></div>
		<div class="icon-cell" @click="clickIcon('turn-off')"><div class="icon-icon"><el-icon><turn-off></turn-off></el-icon></div><div class="icon-text">turn-off</div></div>
		<div class="icon-cell" @click="clickIcon('umbrella')"><div class="icon-icon"><el-icon><umbrella></umbrella></el-icon></div><div class="icon-text">umbrella</div></div>
		<div class="icon-cell" @click="clickIcon('unlock')"><div class="icon-icon"><el-icon><unlock></unlock></el-icon></div><div class="icon-text">unlock</div></div>
		<div class="icon-cell" @click="clickIcon('upload')"><div class="icon-icon"><el-icon><upload></upload></el-icon></div><div class="icon-text">upload</div></div>
		<div class="icon-cell" @click="clickIcon('upload-filled')"><div class="icon-icon"><el-icon><upload-filled></upload-filled></el-icon></div><div class="icon-text">upload-filled</div></div>
		<div class="icon-cell" @click="clickIcon('user')"><div class="icon-icon"><el-icon><user></user></el-icon></div><div class="icon-text">user</div></div>
		<div class="icon-cell" @click="clickIcon('user-filled')"><div class="icon-icon"><el-icon><user-filled></user-filled></el-icon></div><div class="icon-text">user-filled</div></div>
		<div class="icon-cell" @click="clickIcon('van')"><div class="icon-icon"><el-icon><van></van></el-icon></div><div class="icon-text">van</div></div>
		<div class="icon-cell" @click="clickIcon('video-camera')"><div class="icon-icon"><el-icon><video-camera></video-camera></el-icon></div><div class="icon-text">video-camera</div></div>
		<div class="icon-cell" @click="clickIcon('video-camera-filled')"><div class="icon-icon"><el-icon><video-camera-filled></video-camera-filled></el-icon></div><div class="icon-text">video-camera-filled</div></div>
		<div class="icon-cell" @click="clickIcon('video-pause')"><div class="icon-icon"><el-icon><video-pause></video-pause></el-icon></div><div class="icon-text">video-pause</div></div>
		<div class="icon-cell" @click="clickIcon('video-play')"><div class="icon-icon"><el-icon><video-play></video-play></el-icon></div><div class="icon-text">video-play</div></div>
		<div class="icon-cell" @click="clickIcon('view')"><div class="icon-icon"><el-icon><view></view></el-icon></div><div class="icon-text">view</div></div>
		<div class="icon-cell" @click="clickIcon('wallet')"><div class="icon-icon"><el-icon><wallet></wallet></el-icon></div><div class="icon-text">wallet</div></div>
		<div class="icon-cell" @click="clickIcon('wallet-filled')"><div class="icon-icon"><el-icon><wallet-filled></wallet-filled></el-icon></div><div class="icon-text">wallet-filled</div></div>
		<div class="icon-cell" @click="clickIcon('warn-triangle-filled')"><div class="icon-icon"><el-icon><warn-triangle-filled></warn-triangle-filled></el-icon></div><div class="icon-text">warn-triangle-filled</div></div>
		<div class="icon-cell" @click="clickIcon('warning')"><div class="icon-icon"><el-icon><warning></warning></el-icon></div><div class="icon-text">warning</div></div>
		<div class="icon-cell" @click="clickIcon('warning-filled')"><div class="icon-icon"><el-icon><warning-filled></warning-filled></el-icon></div><div class="icon-text">warning-filled</div></div>
		<div class="icon-cell" @click="clickIcon('watch')"><div class="icon-icon"><el-icon><watch></watch></el-icon></div><div class="icon-text">watch</div></div>
		<div class="icon-cell" @click="clickIcon('watermelon')"><div class="icon-icon"><el-icon><watermelon></watermelon></el-icon></div><div class="icon-text">watermelon</div></div>
		<div class="icon-cell" @click="clickIcon('wind-power')"><div class="icon-icon"><el-icon><wind-power></wind-power></el-icon></div><div class="icon-text">wind-power</div></div>
		<div class="icon-cell" @click="clickIcon('zoom-in')"><div class="icon-icon"><el-icon><zoom-in></zoom-in></el-icon></div><div class="icon-text">zoom-in</div></div>
		<div class="icon-cell" @click="clickIcon('zoom-out')"><div class="icon-icon"><el-icon><zoom-out></zoom-out></el-icon></div><div class="icon-text">zoom-out</div></div>
	</div>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			EP: ElementPlus,
			//详见feedback/Loading.html，使用了ElementPlus.ElLoading.service()
			msg: 'Hello Vue!!',
			value: true,
			color: 'red',
			iconIndex: "search",
		}
	},
}

Main.computed = {
	iconDemo(){
		return `<el-icon><${this.iconIndex}></${this.iconIndex}></el-icon>`;
	}
}

Main.methods = {
	clickIcon(icon) {
		this.iconIndex = icon;
		// console.log(icon)
	},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
// for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
// 	app.component(key, component);
// 	let name = component.__name;
// 	let str = `<div class="icon-cell" @click="clickIcon('${name}')"><div class="icon-icon"><el-icon><${name}></${name}></el-icon></div><div class="icon-text">${name}</div></div>`;
// 	console.log(str);
// };


app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>